<nz-layout class="layout-wrapper">
    <nz-header *ngIf="isFullscreen" class="nz-header">
        <div class="logo">生态监测平台</div>
        <div class="header-icon" (click)="showConfirm()">
            <kylin-icon icon="poweroff"></kylin-icon>
        </div>

        <div class="header-icon header-home" (click)="skip('/home/home-page')">
            <kylin-icon icon="home" theme="fill"></kylin-icon>
        </div>

        <div class="header-avatar">
            <div nz-dropdown [nzPlacement]="'bottomRight'" [nzDropdownMenu]="menu" [(nzVisible)]="dropDownVisible">
                <div nz-dropdown class="nz-dropdown-menu-wrap">
                    <nz-avatar [nzSize]="'large'" nzIcon="anticon anticon-user" [nzSrc]="avatar"></nz-avatar>
                    <span class="welcome-message">{{user.nickname || '匿名'}}</span>
                </div>
            </div>
            <nz-dropdown-menu #menu="nzDropdownMenu">
                <ul nz-menu class="nz-dropdown-menu" *ngIf="user">
                    <li nz-menu-item class="clearfix user-info-title" [ngStyle]="{'backgroundColor': 'transparent'}">
                        <span style="float: left">账户信息</span>
                        <span style="float: right">
                            <a (click)="accountSettingsVisible=true">账户设置</a>
                        </span>
                    </li>
                    <li nz-menu-item [ngStyle]="{'backgroundColor': 'transparent'}">•
                        昵称：{{user.nickname || '匿名'}}</li>
                    <li nz-menu-item [ngStyle]="{'backgroundColor': 'transparent'}">•
                        修改时间：{{user.updateTime | kylinDatePipe:'YYYY-MM-DD  HH:mm:ss'}}</li>
                    <li nz-menu-item [ngStyle]="{'backgroundColor': 'transparent'}">•
                        注册时间：{{user.createTime | kylinDatePipe:'YYYY-MM-DD  HH:mm:ss'}}</li>
                </ul>
            </nz-dropdown-menu>
        </div>

    </nz-header>

    <nz-layout class="layout-nz-content">

        <nz-sider *ngIf="isFullscreen" nzCollapsible class="nz-sider" [(nzCollapsed)]="nzCollapsed">
            <kylin-side-menu [sidebarMenuData]="sidebarMenuList"></kylin-side-menu>
        </nz-sider>

        <nz-layout style="overflow: -moz-scrollbars-none;background-color:#F6F7FC;">
            <nz-content class="nz-content">
                <div [ngClass]="isFullscreen?'home-content':'home-content-fullscreen'">
                    <router-outlet></router-outlet>
                </div>
            </nz-content>
        </nz-layout>
    </nz-layout>
</nz-layout>
<nz-modal [nzTitle]="" [(nzVisible)]="accountSettingsVisible" [nzMaskClosable]="false" nzTitle="账户设置"
          [nzOkLoading]="accountSettingsLoading" (nzOnCancel)="accountSettingsCancel()"
          (nzOnOk)="accountSettingsOk(accountNzSelectedIndex===0?'account':'password')">
    <nz-tabset [(nzSelectedIndex)]="accountNzSelectedIndex">
        <nz-tab nzTitle="账户信息">
            <form nz-form [formGroup]="accountForm">
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="nickname">昵称</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入昵称">
                        <input nz-input formControlName="nickname" id="nickname"/>
                    </nz-form-control>
                </nz-form-item>
            </form>
        </nz-tab>
        <nz-tab nzTitle="密码">
            <form nz-form [formGroup]="passwordForm">
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="oldPassword">原密码</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入原密码">
                        <input nz-input formControlName="oldPassword" id="oldPassword"/>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="newPassword">新密码</nz-form-label>
                    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入新密码">
                        <input nz-input formControlName="newPassword" id="newPassword"/>
                    </nz-form-control>
                </nz-form-item>
            </form>
        </nz-tab>
    </nz-tabset>
</nz-modal>
